BREAKING CHANGES

1. LoaderPosition is no longer exported.

// BEFORE
const position: LoaderPosition
// AFTER 
const position: LoaderProps['position']

Problem

To generate proper playgrounds for components we need to have a set of values props. It's impossible to get them from strings.

Allow to use Markdown in props description

This will allow us provide more meaningful descriptions for props.

Missing default values

Only values that were specified by @default tag in JSX were present, for Loader we have missed as, delay, labelPosition and size 💥

✅ Fixed by update of parseDefaultValue:

Unable to manipulate values

Previously we had just string as values ("gap.smaller" | "gap.small" | "gap.medium" | "gap.large") from react-typescript-docgen, so we can't to use them for playground generation.

✅ An updated parseType() function powered by Babel parses these strings and create proper definition structure:

    {
      "types": [
        {"value": "gap.smaller"},
        {"value": "gap.small"},
        {"value": "gap.medium"},
        {"value": "gap.large"}
      ],
      "name": "gap",
    },

Why use Babel in parseType()?

Only AST parser can provide proper output. Any implementation based on regexps will be fragile on things like generic types.

Why not use only Babel?

It will be hard to resolve types that are coming interfaces CommonProps, i.e. Babel good at parse, but it can't resolve TS types.

Handle edge cases

react-typescript-docgen uses typeToString() to generate strings with types mentioned above. Sometimes it generates things like this:

ℹ️ I tried to configure output of typeToString() manually via 3rd param (TypeFormatFlags), but it still resolved types.
✅ Fixed by direct lookup in Babel AST, see getTypeFromBabelTree()

Wrong as prop definition

It was marked as required and missed description.

🆚

Hard to understand what props can be passed to slot

What can be passed to clearIndicator?

Based on #1605 we know which props are used. With parsed types we can obviously understand relationship between components. In this example, BoxProps is a link to Box component 🚀